<template>
  <div>
    <template v-if="type == 1">
      <el-upload
              class="avatar-uploader"
              action="https://upload.qiniup.com"
              :disabled="!isEdit"
              :on-success="uploadSuccess"
              :on-change="onChange"
              :before-upload="beforeUpload"
              :data="postData"
              :file-list="fileList"
              :show-file-list="false">
        <img v-if="url" :src="url" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>

    </template>
    <template v-if="type === 2">
      <el-upload action="https://upload.qiniup.com"
              drag
              accept=".zip"
                 :limit="1"
              :on-success="uploadSuccess"
              :data="postData"
              :file-list="fileList"
              :show-file-list="true"
              >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传zip文件，且最多只能上传一个</div>
      </el-upload>
    </template>
  </div>
</template>

<script>
  import { v4 as uuidv4 } from 'uuid';
  import axios from "axios";
  export default {
    name: "Upload",
    props:{
      isEdit : Boolean,
      type : Number
    },
    data(){
      return{
        fileList: [],
        postData:{
          key:'',
          token : ''
        },
        form:{
          img_url:"",
        },
        url : ''
      }
    },
    created() {
      //生成唯一标识uuid
      this.postData.key = uuidv4()
      console.log( this.postData.key)
      //获取token
      axios.post('https://haotry.top/api/Qiniu/getUploadToken',JSON.stringify({key:this.postData.key}),{
        headers:{
          'Content-Type':'application/json'
        }
      }).then(res => {
        console.log('获取token')
        console.log(res)
        if(res.status === 200){
          this.postData.token = res.data.data
          console.log(this.postData.token)
        }
      }).catch(err =>{
        console.log(err)
      })

      if(this.$store.getters.getUserType == 'server')
      {
        this.url = this.$store.getters.getInfo.ser_avatar
      }
      else if(this.$store.getters.getUserType == 'buyer')
      {
        this.url = this.$store.getters.getInfo.ber_image
      }
      console.log(this.url)
      console.log(this.type)
    },
    methods:{
      beforeUpload(file){
        console.log(this.form)
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("图片只能是 JPG/PNG 格式!");
          return false;
        }
        if (!isLt2M) {
          this.$message.error("图片大小不能超过 2MB!");
          return false;
        }
      },
      onChange(file,fileList){
        console.log('change')
        console.log(file)
        if (fileList.length > 0) {
          this.fileList = [fileList[fileList.length - 1]]  // 这一步，是 展示最后一次选择的zip文件
        }
      },

      //图片上传到七牛云的成功回调，获取url传递给服务器
      uploadSuccess(file, fileList){
        // this.url = window.URL.createObjectURL(fileList.raw);
        // console.log(this.url)
        this.url = "http://r08pre7o1.hd-bkt.clouddn.com/"+file.key
        console.log('上传成功')
        console.log(this.url)
        // console.log('七牛云路径')
        // console.log(this.form.img_url)
       this.$emit('getImgUrl',this.url)
      },
    }
  }
</script>

<style scoped>
  .avatar-uploader{
    width: 100px;
    height: 100px;
    border: 1px solid #a19898;
    /*background-color: red;*/
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 98px;
    height: 98px;
    line-height: 98px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>
